<template>
    <view class="notice">
        <text class="icon icon-clock o-font-color-error o-font-size-lg"></text>
        <u-notice-bar mode="vertical" :volume-icon="false" type="none" :duration="2000" :list="noticeList" color="#333333" class="o-full-w" @click="router"></u-notice-bar>
    </view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'

const ins = inject<any>('data')

const noticeList = computed(() => {
    return ins.contentList.map((m: any) => m.content)
})

const targets = computed((): Array<any> => {
    return ins.contentList.map((m: any) => {
        return {
            urlType: m.url && m.url.urlType,
            urlId: m.url && m.url.urlId,
            urlString: m.url && m.url.urlString
        }
    })
})

function router(e: number) {
    let type = targets.value[e].urlType
    let id = targets.value[e].urlId
    let url = targets.value[e].urlString
    uni.$u.$util.jumpByUrlType(id, type, url)
}
</script>

<style lang="scss" scoped>
.notice {
    background: $uni-bg-color;
    height: 44px;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
}
</style>
